// 旋转和选中的
var petals = document.getElementsByClassName('petals')//所有花瓣
for (let i = 0; i < petals.length; i++) {
    // transform:translate(10px,10px) rotate(20deg)
    petals[i].style.rotate = 360 / 8 * i + "deg"
    petals[i].onclick = function () {
        for (let j = 0; j < petals.length; j++) {
            petals[j].classList.remove('selected')
            petals[j].style.border = '1px solid'
        }
        this.classList.add('selected')
        this.style.border = '2px dashed '
    }
}



/* 
change当用户更改<input>、<select>和<textarea> 元素的值并提交这个更改时，change 事件在这些元素上触发。
和 input 事件不一样，change 事件并不是每次元素的 value 改变时都会触发。 
*/
// 根据表单改变颜色
var bgColor = document.getElementsByName('bgColor');
bgColor[0].addEventListener('change', () => {
    var selected = document.querySelector('.selected')//点击的那个花瓣
    var bgColor = document.getElementsByName('bgColor')[0].value;
    selected.style.background = bgColor
    console.log(bgColor);
});


